//分类页
//author: 王梦阳

var userId = localStorage.getItem("user"); //用户id
var second = new Array(); //定义一个数组，存储一级分类的名字
var second_con = new Array(); //定义一个数组存储二级列表的名字
var second_number = 0;
var htmlContent2 = "";

// 商品分类页面实现
var classification = {
	version: "v1.0",
	length: 0,
	getFirstTitle: function() {
		//获取一级分类类别
		$.ajax({
			url: "http://39.98.158.247:8040/category/get/first",
			success: function(data) {
				let htmlContent = "";
				htmlContent2="";
				classification.length = data.data.length;
				for (var i = 0; i < data.data.length; i++) {
					second[i] = data.data[i].category_name;
					second_content = data.data[i].cate
					htmlContent +=
						`<span class="menu">
					       <a  onclick="toView('${i}_${i}')">${data.data[i].category_name}</a>
				        </span>`;
					htmlContent2 +=
						`<div id="${i}_${i}" class="second">
					    <p >${data.data[i].category_name}</p>
						<div class="${i}" id="content">
						</div>
					</div>`
				}
				$(".first-title").html(htmlContent);
				$(".second-title").html(htmlContent2);
				getSecond.getSecondTitle();

			},
			error: function() {
				console.log("request error");
			}
		})
	},

}
//定义点击一级分类后二级分类展示样式
function toView(id) {
	for (var i = 0; i < classification.length; i++) {
		document.getElementById(i + "_" + i).style.display = "none";
	}
	document.getElementById(id).style.display = "block";

}
//请求后端获取二级列表
let getSecond = {
	version: 'v1.0',
	author: '',
	getSecondTitle: function() {
		for (var i = 0; i < second.length; i++) {
			$.ajax({
				type: "GET",
				async: false,
				url: "http://39.98.158.247:8040/category/get/child",
				data: {
					name: second[i]
				},
				success: function(data) {
					let htmlContent1 = "";
					for (var j = 0; j < data.data.length; j++) {
						htmlContent1 +=
							`  <div class="second-content">
									<img id="${j+second_number}" src="${data.data[j].category_img}"/ > 
									<p>${data.data[j].category_name}</p>
							   </div>
							`;

						second_con.push(`${data.data[j].category_name}`);
					}
					$("." + i).html(htmlContent1);

					for (var m = 0; m < data.data.length; m++) {
						let number = m + second_number;
						$("#" + number).click(function() {
							console.log(this.id);
							$.ajax({
								url: "http://39.98.158.247:8040/item/category",
								async: false,
								data: {
									category: second_con[this.id]
								},
								success: function(data) {
										console.log(data);
										window.open("second-title-item.html", "_blank");
										localStorage.dataset = JSON.stringify(data);
								},
								error: function() {
									console.log("request error")
								}
							})

						})
					}
					second_number += data.data.length;
				},
				error: function() {
					console.log("request error");
				}
			})

		}
	}
}

//获取底部导航

let getBottomNav = {
	version: 'v1.0',
	getBottomNavInfo: function() {
		$.ajax({
			url: "http://39.98.158.247:8040/navigate/get/bottom",
			dataType: "json",
			success: function(data) {
				console.log(data);
				let htmlContent = "";
				for (var i = 0; i < data.data.length ; i++) {
					// console.log(getBottomNav.ToPage(data.data[i].bottom_button_id));
					let target = getBottomNav.ToPage(data.data[i].bottom_button_id);
					htmlContent +=
						` <a  id="${data.data[i].bottom_button_id}"  class="mui-tab-item " href="${target}">
				         <span class="mui-icon ${data.data[i].bottom_button_icon}"></span>
				         <span class="mui-tab-label">${data.data[i].bottom_button_name}</span>
				        </a>`;
					
				}
				$(".mui-bar-tab").html(htmlContent);
				document.getElementById(data.data[1].bottom_button_id).className="mui-tab-item mui-active";
			},
			error: function() {
				console.log("request error");
			}
		})
	},
	ToPage: function(id) {
		switch (id) {
			case "tab_home":
				return "index.html";
				break;
			case "tab_fenlei":
				return "Classification.html";
				break;
			case "tab_contact":
				return "Chat.html";
				break;
			case "tab_gerenzhongxin":
				return "personal-center.html";

		}
	},
}

window.onload = function() {
	console.log(userId);
	getBottomNav.getBottomNavInfo();
	classification.getFirstTitle();
	user.GetPage("分类页",userId);
}
